<template>
  <div class="loading-page">
    <c-animation class="ani-loading" :style="`transform: translateX(${-20 + 0.4 * progress}vw)`"></c-animation>
    <div class="progressBar">
      <div class="barContent" :style="`width: ${progress}%`"></div>
    </div>
    <!-- <div class="content">
      <div>{{ label }}&nbsp;&nbsp;&nbsp;</div>
      <div>{{ progress }}&nbsp;/&nbsp;100</div>
    </div> -->
  </div>
</template>
<script>
import Animation from "./Animation.vue"
import assets from "../assets.json"

export default {
  name: "loading",
  components: {
    "c-animation": Animation,
  },
  data() {
    return {
      label: "",
      progress: 0,
    }
  },
  created() {
    const queue = new window.createjs.LoadQueue(false)
    let manifest = []

    // eslint-disable-next-line no-const-assign
    manifest = manifest.concat(...assets)
    queue.loadManifest(manifest)
    // queue.setMaxConnections(3)

    queue.on("progress", this.handleFileProgress)
    queue.on("complete", this.handleLoadComplete)
    queue.on("error", this.handleLoadError)
  },
  methods: {
    handleFileProgress(evt) {
      this.progress = parseInt((evt.loaded || 0) * 100)
      this.label = "加载中..."
    },
    handleLoadComplete() {
      this.label = "加载完成"
      this.$emit("setStep", 1)
    },
    handleLoadError() {},
  },
}
</script>

<style lang="scss" scoped>
.loading-page {
  width: 100vw;
  height: 100vh;
  background-color: #111111;
  background-size: contain;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .content {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    color: #7ec699;
    font-size: 20px;
  }

  .progressBar {
    margin-top: -3.5vh;
    width: 45vw;
    height: 5px;
    background: #ffffff;
    border-radius: 5px;
  }
  .barContent {
    height: 5px;
    background: #00ff21;
    border-radius: 5px;
  }

  .ani-loading {
    width: 40vw;
    height: 39.473vw;
  }
}
</style>
